무직스 디자인 시스템 개발 복기

정보

다음은 디자인 시스템을 개발하기 위해 진행했던 내용들을 복기한 내용입니다.

스택

1. 디자인 : figma
2. 개발 : vscode, typescript, storybook
3. 디바이스 : mac

디자인

소요 기간

1. 커리어바웃의 MVP 디자인(프로타이핑)에 약 2개월 정도 소요되었다. 물론 현재까지도 지속적으로 업데이트하고 있으며, 전체적으로 바라봤을 때 어울리지 않는 부분은 수정하거나 새로운 것들을 추가해나가고 있다.

작업 결과

1. 정량적으로는, 페이지는 4장(랜딩, 메인, 포트폴리오, 설정), 각 페이지를 구성하는 UI는 약 50종 이상(버튼, 프로필 카드 등)을 그렸다. 구체적으로 알아보고 싶은 욕구가 있어 개발된 컴퍼넌트들의 숫자를 확인하고 업데이트할 계획인다.
2. 정성적으로는, figma와 atomic 디자인 시스템에 대한 이해였다. 페이지와 UI가 늘어남에 따라 flow chart에 중복으로 들어가 있는 요소들이 많아졌고, 하나를 수정하면 여러개를 다시 수정해야하는 소요가 생겨 컴포넌트로 다시 제작하고 디자인 토큰 등 UI의 재사용성을 높어 프로젝트의 크기가 커지는 상황에서 생산성을 더욱 높일 수 있는 방향으로 실력을 향상시킬 수 있었다.

디자인 중점 사항

1. 사용자의 경험을 향상시키는 것이 이번 디자인의 중점사항이었고 이를 위해 사용자의 부담감을 낮추고 페이지 이탈을 줄여 서비스의 맥락을 유지하는 것이었다.

2. 사용자의 부담감이란, 서비스를 이용하는 과정에서 사용자의 참여를 높이는

3. 페이지로는 랜딩 페이지, 메인 페이지, 포트폴리오 페이지로 구상했던 내용들을 디자인을 통해 구체화하면서 내가 생각했던